<template>
    <el-dialog v-model="outerVisible" title="新增类别" @close="closeAddType" :close-on-click-modal="false" width="30%">
        <template #default>
            <el-dialog v-model="innerVisible" :title="showInfo" append-to-body width="30%"/>
        </template>
        <template #footer>
            <el-form class="demo-ruleForm" ref="ruleFormRef" :model="ruleForm" :rules="rules" :size="formSize" status-icon label-width="120px">
                <el-form-item label="类别" prop="typeName">
                    <el-input v-model="ruleForm.typeName" style="width:180px"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="addTypeLoading">添加</el-button>
                    <el-button @click="resetForm(ruleFormRef)">清空</el-button>
                </el-form-item>
            </el-form>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
    import {ref,computed,reactive} from 'vue'
    import type {FormInstance,FormRules} from 'element-plus'
    import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
    import {addType} from '@/api/type'

    const innerVisible = ref(false)

    const showInfo = ref('')

    const ruleFormRef = ref<FormInstance>()

    const formSize = ref('default')

    const addTypeLoading = ref(false)

    const emit = defineEmits(['closeAddType','completeAddType'])

    const props = defineProps({
        type: Object,
        addTypeShow: Boolean
    })

    const outerVisible = computed({
        get() {
            return props.addTypeShow
        },
        set(value) {
            emit('closeAddType',"close add type")
        }
    })

    const closeAddType = () => {
        console.log("close add type")
        outerVisible.value = false
        resetForm(ruleFormRef.value)
    }

    const ruleForm = reactive({
        typeName: '',
    })

    const rules = reactive<FormRules>({
        typeName: [
            {required: true, message: '请输入角色', trigger: 'blur'},
            {min: 2, max: 10, message: '姓名长度在2到10个字符', trigger: 'blur'}
        ],
    })

    const submitForm = async(formEl: FormInstance | undefined) => {
        if(!formEl) return
        await formEl.validate((valid,fields) => {
            if(valid) {
                console.log(valid)
                console.log(ruleFormRef.value)
                submitAddType()
                resetForm(ruleFormRef.value)
                closeAddType()
            } else {
                console.log(fields)
            }
        })
    }

    const submitAddType = async() => {
        console.log(ruleForm);  
        addTypeLoading.value = true
        try {
            const addTypeResult:any = await addType(ruleForm)
            addTypeLoading.value = false
            if(addTypeResult.data) {
                console.log(addTypeResult)
                emit('completeAddType')
                outerVisible.value = false
                ElMessage({
                    type: 'info',
                    message: addTypeResult.info.msg,
                })
                resetForm(ruleFormRef.value)
            }else{
                showInfoBox(addTypeResult.info.msg)
            }
        } catch(error) {
            console.log(error)
            addTypeLoading.value = false
        }
    }

    const showInfoBox = (info:string) => {
        showInfo.value = info
        innerVisible.value = true
    }

    const resetForm = (formEl: FormInstance | undefined) => {
        if(!formEl) return
        formEl.resetFields()
    }
</script>